<?php

use app\assets\EchartsAsset;
use app\models\Card;
use app\models\KeyMap;
use yii\db\Expression;

/**
 * @var $this \yii\web\View
 */

EchartsAsset::register($this);

$this->title = '控制台';
?>
<div class="row">
    <div class="col-md-6" id="charts_status"></div>
    <div class="col-md-6"></div>
</div>
<?php $statusCount = Card::find()
    ->asArray()
    ->select([
        'status' => 'status',
        'amount' => new Expression('COUNT(0)'),
    ])
    ->andWhere(['uid' => Yii::$app->user->id])
    ->groupBy('status')
    ->all();
array_walk($statusCount, function (&$item) {
    $item['status'] = KeyMap::getValue('card_status', $item['status']);
});?>
<script>
    var statusAmount = <?php echo json_encode($statusCount);?>;
    function pageInit() {
        var $box = $('#charts_status');
        $box.height($box.width() * 0.75);
        var chartsStatus = echarts.init(document.getElementById('charts_status'), 'macarons');
        var legend = [];
        var seriesData = [];
        statusAmount.forEach(function (item, key) {
            legend.push(item['status']);
            seriesData.push({
                name: item['status'],
                value: item['amount']
            });
        });
        chartsStatus.setOption(getChartsStatusOption(legend, seriesData));
    }

    /**
     * 获取统计状态图表参数
     * @returns object
     */
    function getChartsStatusOption(legend, seriesData) {
        return {
            title : {
                text: '状态统计',
                x:'center'
            },
            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },
            legend: {
                type: 'scroll',
                orient: 'vertical',
                right: 10,
                top: 20,
                bottom: 20,
                data: legend
            },
            series : [
                {
                    name: '状态统计',
                    type: 'pie',
                    radius: ['50%', '70%'],
                    center: ['40%', '50%'],
                    data: seriesData,
                    itemStyle: {
                        emphasis: {
                            shadowBlur: 10,
                            shadowOffsetX: 0,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    }
                }
            ]
        };
    }
</script>
